<template>
	<view>
		<view style="height: 160rpx;box-sizing:border-box; padding-top: 81rpx;background-color: #FF1414;">
				<uni-icons type="arrowleft" size="20" color="#FFFFFF" @click="backTo()" style="margin: 0 259rpx 0 30rpx;"></uni-icons>
			<text style="font-size: 32rpx;color: #fff;">分销订单</text>
		</view>
		<view class="head">
			<view class="left">可提现（元）</view>
			<view class="right">{{canGetMoney}}</view>
		</view>
		<view>
			<view style="margin: 30rpx 52rpx 30rpx; display: flex;justify-content: space-between;font-size: 28rpx;">
				<view v-for="(info, index) in dindan" :key="index">
					<view :class="{ active: dindanIndex == index }" @click="dindanClick(index)">
						{{ info }}
						<view class="select"></view>
					</view>
				</view>
			</view>

				<view class="list">
					<view class="noRecordCon" v-if="noData">
						<view class="noRecord">还没有记录 快去分享吧～</view>
					</view>

					<block v-else>
						<view class='list-item' v-for="(item,i) in distributionList" :key="i">
							<view class='item-head'>
								<view class='time'>订单编号：{{item.order_num_alias}}</view>
								<view class='status'>{{stateArr[item.state]}}</view>
							</view>

							<view class="spu">
								<image :src='item.goods_images' class='goodsImg' mode='widthFix'></image>

								<view class="detail">

									<view class="spuName">
										<text>{{item.name}}</text>
									</view>

									<view class="tips">
										<text>￥{{item.price}}</text> x {{item.quantity}} {{item.option_str}}
									</view>

								</view>

							</view>

							<view class="line">
								<view>会员名称</view>
								<view>{{item.uname}}</view>
							</view>

							<view class="line">
								<view>粉丝等级</view>
								<view>
									{{item.level}}
								</view>
							</view>

							<view class="line">
								<view>下单时间</view>
								<view>{{item.addtime}}</view>
							</view>

							<view class="line">
								<view>订单状态</view>
								<view>{{item.status_name}}</view>
							</view>

							<view class="line" v-if="item.has_refund_quantity == 0? false : true">
								<view>预估佣金变化<text style="margin-left:10rpx;"></text></view>
								<view>{{item.money}}</view>
							</view>

							<view class="line" v-else>
								<view>预估佣金</view>
								<view>{{item.money}}</view>
							</view>

						</view>
					</block>
				</view>


		</view>
	</view>
</template>

<script>
	import {
		Storage
	} from '@/static/libs/utils.js'
	export default {
		data() {
			return {
				dindan: ['全部', '待结算', '已结算', '已失效'],
				dindanIndex: 0,
				token: '',
				canGetMoney: '', //可提现的数额
				distributionList: [], //分销列表
				stateArr: ["待结算", "已结算", "已失效"],
				noData: false,
				noRecord: '',
				toDoList:[],
				doneList:[],
				failureList:[],
				allList:[]
			};
		},
		onLoad() {
			this.token = Storage.get('token');

			this.getIncomeStatement()
			this.getTodoList()
			this.getDoneList()
			this.getFailureList()
		},
		methods: {
			dindanClick(index) {
				this.dindanIndex = index
				if(this.dindanIndex === 0){
					this.distributionList = this.allList
				}
				if (this.dindanIndex === 1) {
					this.distributionList = this.toDoList
				}

				// 
				if (this.dindanIndex === 2) {
					this.distributionList = this.doneList
				}
				
				if(this.dindanIndex === 3){
					this.distributionList = this.failureList
				}
				if(this.distributionList.length == 0){
					this.noData = true
				}else{
					this.noData = false
				}
			},
			getIncomeStatement() {
				//推广收益信息
				this.$request.get(
						`/wxapp.php?i=undefined&t=undefined&v=undefined&from=wxapp&c=entry&a=wxapp&do=user&m=lionfish_comshop&sign=36b1469244c9aec1c424df4242199a18&controller=distribution.get_commission_info&token=${this.token}`
					)
					.then(res => {
						// console.log(152, res.data.data);
						this.canGetMoney = res.data.data.getmoney
					})

				// 获取全部列表
				this.$request.get(
						`/wxapp.php?i=undefined&t=undefined&v=undefined&from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&sign=75956eff4fbc7cd6508ebb56862cae8d&controller=distribution.listorder_list&token=${this.token}&state=-1&page=1`
					)
					.then(res => {
						console.log(158, res.data.data);
						this.allList =res.data.data
						this.distributionList = res.data.data

					})
			},
			// 获取待结算列表
			getTodoList() {
				this.$request.get(
						`/wxapp.php?i=undefined&t=undefined&v=undefined&from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&sign=ffaaf687464efe61543cf509bafe6a69&controller=distribution.listorder_list&token=${this.token}&state=0&page=1`
					)
					.then(res => {
						console.log(162,res.data);
						this.toDoList = ''
						
					})
			},
			// 获取已结算列表
			getDoneList() {
				this.$request.get(
						`/wxapp.php?i=undefined&t=undefined&v=undefined&from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&sign=21d8843c92e76d7172a8809f36a9df33&controller=distribution.listorder_list&token=${this.token}&state=1&page=1`
					)
					.then(res => {
						console.log(178, res.data.data);
						this.doneList = res.data.data
					})
			},
			// 获取已失效列表
			getFailureList(){
				this.$request.get(
						`/wxapp.php?i=undefined&t=undefined&v=undefined&from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&sign=699662580194a55c7902d64f21f94abf&controller=distribution.listorder_list&token=${this.token}&state=2&page=1`
					)
					.then(res => {
						console.log(192, res.data);
						this.failureList = ''
					})
			}

		}
	};
</script>

<style lang="scss" scoped>
	.sl {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.active {
		.select {
			display: block;
		}
	}

	.select {
		display: none;
		width: 40rpx;
		height: 6rpx;
		background-color: #FF492E;
		margin-left: 15rpx;
		border-radius: 4rpx;
		margin-top: 5rpx;
	}

	.head {
		// width: 100%;
		//height: 128rpx;
		line-height: 4;
		background: linear-gradient(180deg, #fa2516 0%, #ff7979 100%);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		color: #ffffff;

		.left {
			font-size: 32rpx;
			font-weight: bold;
		}

		.right {
			font-size: 36rpx;
			font-weight: 400;
		}
	}

	.noRecordCon {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.noRecordCon .noRecordImg {
		width: 132rpx;
		height: 138rpx;
		margin-top: 30%;
	}

	.noRecordCon .noRefundImg {
		width: 218rpx;
		height: 218rpx;
		margin-top: 50%;
	}

	.noRecordCon .noRecord {
		padding-top: 32rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Light;
		font-weight: 300;
		color: #666;
		line-height: 30rpx;
	}

	.noRecordCon .goIndex {
		width: 164rpx;
		height: 60rpx;
		background: #ff3432;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #fff;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.list-item {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.item-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #ececec;
		padding-bottom: 20rpx;
	}

	.item-head .status {
		color: #ff5344;
	}

	.list-item .line {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 2;
	}

	.line-tit {
		color: #999;
	}

	.top_box_head {
		padding: 30rpx;
	}

	.tx-btn {
		color: #ff5344;
	}

	.goodsInfo {
		padding: 0 !important;
	}

	.goodsInfo .identity {
		left: 0 !important;
	}

	.spu {
		padding: 30rpx 30rpx 20rpx;
		display: flex;
		justify-content: flex-start;
	}

	.spu .goodsImg {
		width: 140rpx;
		height: 140rpx;
	}

	.spu .detail {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #aaa;
	}

	.spu .detail .spuName {
		color: #444;
		font-size: 28rpx;
		font-weight: 500;
		overflow: hidden;
	}

	.spu .detail .tips {
		line-height: 1;
		width: 530rpx;
		margin-top: 16rpx;
		position: relative;
	}

	.spu .detail .tips .last {
		float: right;
	}

	.spu .detail .tips .price {
		color: #ff5344;
		font-size: 32rpx;
	}
</style>
